<template>
  <div>
      <div class="top">
        <gotoSearch/>
    </div>
    <div class="line"></div>
    <div class="sortContainer">

      <div class="left">
        <van-sidebar v-model="active">
          <van-sidebar-item :title="nav.name" v-for="nav in navList" :key="nav.id" @click="changeNav(nav.id)"/>
        </van-sidebar>
      </div>

      <div class="right">
        <div v-show="currentId === 11" class="rightItem">
          <div class="rightImg">
            <van-image
              :src="currentCategory[0]?.picUrl"
              />
            </div>
            <div class="main" @click="changeList(cate2.superCategoryId,cate2.id,cate2.categoryType)" v-for="cate2 in category2List" :key="cate2.id">
                <!-- <lazy-component> -->
                <img class="VImg"  :src="cate2.bannerUrl" alt="">
                <!-- </lazy-component> -->
                <div class="VText">{{ cate2.name }}</div>
            </div>
          </div>

          <Sort v-show="currentId !== 11" :categoryList="categoryList" :categoryImg="categoryImg"></Sort>
        </div>     
    </div>
    <Following/>
 
  </div>

</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router';

export default defineComponent({
  name: 'Sort'
})
</script>

<script lang="ts" setup>
import { Sidebar, SidebarItem,Col, Row,Image as VanImage ,Grid, GridItem,Lazyload} from 'vant';
import { ref,watch } from 'vue';
import {reqSortList}  from '@/api/modules/sort'
import type {categoryList2,sortImg,categoryListData} from '@/api/modules/sort'
import { storeToRefs } from 'pinia';
import { useSortInfo } from '@/stores/modules/sort'
import Sort from '@/components/sort/index.vue'
import { reqSortListId } from '@/api/modules/sort'
const active = ref(0);
const useSortInfoData = useSortInfo()
const {navList, currentCategory, category2List, currentId} = storeToRefs(useSortInfoData)
useSortInfoData.getSortData()
// useSortInfoData.getSortDataList()
let categoryList = ref<categoryListData[]>([])
let categoryImg = ref<sortImg[]>([])
let uid = ref('')
const changeNav = async (id : number | number[])=>{
  currentId.value = id 
  const res = await reqSortListId(id as number)
  categoryList.value = res.categoryGroupList
  //@ts-ignore
  categoryImg.value = res.currentCategory;
  
}

const Router = useRouter() 
const changeList = (categoryId:number,subCategoryId:number,categoryType:number)=>{
  Router.push({
    path:'/item/cateList/sortList',
        query:{ 
            categoryId,
            subCategoryId,
            categoryType  
        }
  })
  
}
</script>

<style lang="less" scoped>
.top {
  height: 44px;
}

.line {
  width: 100%;
  height: 2px;
  background-color: #eeeeee;
}

.sortContainer {
  display: flex;
  height: 100%;
  // padding-top: 10px;
}

:deep(.van-image__img) {
  width: 264px;
  height: 96px;
}

.left {
  height: 100%;
}

.rightItem {
  padding-top: 10px;
}

.right {
  margin-left: 15px;
}

.cateImg {
  width: 72px;
  height: 72px;
}

.VImg {
  width: 72px;
  height: 72px;
  display: block;
}

.VText {
  font-size: 12px;
  text-align: center;
  height: 36px;
}

.main {
  width: 72px;
  height: 100px;
}

//   
// }

// .leftNav{
//   background-color: red;
// }

.van-grid-item__content {
  padding-left: 0;
}

.van-sidebar-item {
  height: 30px;
  position: relative;
}

.van-sidebar-item__text {
  text-align: center;
  height: 20px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.van-sidebar-item {
  height: 50px;
}

.van-sidebar {
  height: 100%;
  // background-color: red;
}
</style>
